import React from 'react';
import styled from 'styled-components';
import { Progress, ProgressProps } from 'antd';
import Icon from './Icon';

interface Props {
    prefix?: React.ReactNode;
    icon?: React.ReactNode;
    title?: React.ReactNode;
    subTitle?: React.ReactNode;
    center?: React.ReactNode;
    rightItem?: React.ReactNode;
    arrow?: boolean;
    progress?: ProgressProps;
    bottom?: React.ReactNode;
    onClick?: () => void;
    className?: string;
}

const Container = styled.div`
    padding: .875rem 1rem .9375rem 1rem;
    box-sizing: border-box;
    background-color: ${(prop) => prop.theme.background.box};
    border-radius: .625rem;
    display: flex;
    flex-direction: column;
`

const Content = styled.div`
    display: flex;
    width: 100%;
`

const ProgressBox = styled.div`
    width: 100%;
    /* background-color: red; */
`

const Left = styled.div`
    margin-right: .625rem;
    display: flex;
`

const Center = styled.div`
    display: flex;
    flex-direction: column;
    flex: 1;
    justify-content: center;
    overflow: hidden;
`

const Title = styled.div`
    font-weight: bold;
    font-size: .75rem;
    color: ${(prop) => prop.theme.text.normal};
    text-align: start;
    overflow: hidden;
`

const SubTitle = styled.div`
    font-weight: bold;
    font-size: .625rem;
    color: #A8ADB4;
    display: flex;
    margin-top: .5rem;
    align-items: center;
`

const Right = styled.div`
    margin-left: .625rem;
    display: flex;
    align-items: center;
`

const Cell: React.FC<Props> = ({ prefix, className, icon, arrow, rightItem, center, title, subTitle, onClick, progress, bottom }) => {
    return <Container
        className={className}
        onClick={onClick}
    >
        <Content>
            {(icon || prefix) &&
                <Left>
                    {prefix}
                    {typeof icon === 'string' ? <Icon name={icon} /> : icon}
                </Left>}
            <Center>
                {center || <>
                    <Title>{title}</Title>
                    {subTitle && <SubTitle>{subTitle}</SubTitle>}
                </>}
            </Center>
            <Right>
                {rightItem ? rightItem :
                    (arrow ? <Icon
                        name='arrow_right'
                        width='.75rem'
                    /> :
                        <></>
                    )
                }
            </Right>
        </Content>
        {progress &&
            <ProgressBox>
                <Progress {...progress} />
            </ProgressBox>
        }
        {bottom}
    </Container>
}

export default Cell;

export type {
    ProgressProps
}